﻿module Sustainalytics.Screening {
    export interface JQuery {
        slider(value: any): any;
        slider(option: string, property: string, newValue: any): any;
    }

    var mod = angular.module(screeningToolModuleName);

    mod.directive('criteriaType9Slider', () => {
        return {
            restrict: 'A',
            scope: {
                value: '='
            },
            link: (scope: any, elem, attrs, ctrl) => {
                var min = 0, max = 10;

                var convertScore = (score) => score === 0 ? 0 : max - score + 1;

                var change = (event, ui) => {
                    var newScore = convertScore(ui.value);
                    if (scope.value != newScore) {
                        scope.$apply(() => {
                            scope.value = newScore;
                        });
                    }
                };
                
                var slide = elem.slider({
                    range: "min",
                    value: min,
                    min: min,
                    max: max,
                    slide: change,
                    change: change
                });

                scope.$watch(function () { return scope.value; }, function (newValue) {
                    if (newValue == undefined || isNaN(newValue))
                        return;

                    $(elem)['slider']("option", "value", convertScore(newValue));
                });

                var labels = ["Off", "Severe", " ", "High", " ", "Significant", " ", "Moderate", " ", "Low", " "];
                slide.slider("pips", { rest: "label", labels: labels });
            }
        }
    });
}
